import React, {PureComponent} from "react"
import {connect} from "react-redux"
import {ListItem, ListInfo, LoadMore} from "../style"
import {actionCreater} from "../store"
import {Link} from "react-router-dom"

class List extends PureComponent {
  render() {
    const {list, getMoreArticle, page} = this.props
    return (
      <div>
        {list.map((item, index) => {
          return (
            <Link key={index} to="/detail">
              <ListItem>
                <img src={item.get("imgurl")} alt="img" className="itemImg"/>
                <ListInfo>
                  <h3 className="title">{item.get("title")}</h3>
                  <p className="content">{item.get("content")}</p>
                </ListInfo>
              </ListItem>
            </Link>
          )
        })}
        <LoadMore onClick={() => getMoreArticle(page)}>更多文字</LoadMore>
      </div>
    )
  }
}

const mapState = (state) => ({
  list: state.getIn(["home", "articleList"]),
  page: state.getIn(["home", "articlePage"])
})

const mapDispatch = (dispatch) => {
  return {
    getMoreArticle(page) {
      dispatch(actionCreater.getMoreList(page))
    }
  }
}

export default connect(mapState, mapDispatch)(List);
